import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()
    
    this.state = {
      counter: 0,
      isShow: false
    }

    console.log('1-constructor方法');
  }
  
  render() {
    console.log('2-render()方法');
    return (
      <div>
        <h2>当前计数：{this.state.counter}</h2>
        <button onClick={e => this.increment() }>+1</button>
        <hr />
        
        <button onClick={e => this.handlerIsShowCpns() }>按钮</button>
        { this.state.isShow && <Cpns /> }
      </div>
    )
  }

  componentDidMount() {
    console.log('3-componentDidMount方法');
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  handlerIsShowCpns() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

  componentDidUpdate() {
    console.log('componentDidUpdate方法');
  }
}

class Cpns extends Component {
  render() {
    return <h2>我是Cpns组件</h2>
  }

  componentWillUnmount() {
    console.log('Cpns-componentWillUnmount方法');
  }
} 